<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>客户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctx}/resources/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
</head>
<body style="margin: 10px">
<!--查询条件开始-->
<blockquote class="layui-elem-quote">
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-form-item">
            <div class="layui-inline" id="chooseUserId">
                <label class="layui-form-label">选择业务员</label>
                <div class="layui-input-inline">
                    <select id="userId" name="userId">
                        <option value="">请选择业务员</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户姓名</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入客户姓名" name="name" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户电话</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入客户电话" name="phone" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
                <button type="reset" class="layui-btn layui-btn-danger">重置</button>
            </div>
        </div>
    </form>
</blockquote>
<!--查询条件结束-->

<!--数据表格开始-->
<div>
    <table class="layui-hide" id="customerTable" lay-filter="customerTable"></table>
    <script type="text/html" id="customerTableToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button id="changeUser" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="changeUser">客户转移</button>
        </div>
    </script>
    <script type="text/html" id="customerTableRowBar">
        <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="showVisitLog">查看拜访记录</a>
    </script>
</div>
<!--数据表格结束-->
<!--添加修改弹出层开始-->
<div id="addOrUpdateDiv" style="display: none;margin: 8px">
    <form class="layui-form" id="dataFrm" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">客户姓名</label>
            <div class="layui-input-block">
                <!--修改时要提交一个ID到后台-->
                <input type="hidden" name="id">
                <input type="text" name="name" placeholder="请输入客户姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" placeholder="请输入客户电话" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户公司</label>
            <div class="layui-input-block">
                <input type="text" name="company" placeholder="请输入客户公司" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" value="1" name="sex" title="男" checked >
                <input type="radio" value="0" name="sex" title="女" >
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">保存</button>
            <button type="reset" class="layui-btn layui-btn-danger">重置</button>
        </div>
    </form>
</div>
<!--添加修改弹出层结束-->
<!--选择业务员弹出层开始-->
<div id="changeUserDiv" style="display: none;margin: 8px">
    <form class="layui-form" id="changeUserFrm" lay-filter="changeUserFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">选择业务员</label>
            <div class="layui-input-block" id="users">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="doChangeUserSubmit">保存</button>
        </div>
    </form>
</div>

<!--选择业务员弹出层结束-->

<!--添加拜访记录的弹出层开始-->
<div id="addShowVisitLogDiv" style="display: none;margin: 8px">
    <form class="layui-form layui-form-pane" id="visitLogFrm" lay-filter="visitLogFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">拜访时间</label>
            <div class="layui-input-block">
                <input type="text" name="visitTime" readonly lay-verify="required" id="visitTime" placeholder="请选择拜访时间" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">拜访内容</label>
            <div class="layui-input-block">
                <textarea name="descp" class="layui-textarea" lay-verify="required"></textarea>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button type="button" class="layui-btn" lay-submit=""  lay-filter="doVisitLogSubmit">保存</button>
        </div>
        <div>
            <div id="visitLogTable" class="layui-hide" layui-filter="visitLogTable"></div>
        </div>
    </form>
</div>
<!--添加拜访记录的弹出层结束-->



</body>
<script src="${ctx}/resources/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${ctx}/resources/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>

<script>
    layui.use(['form','layer','table','jquery','laydate'],function () {
        let form=layui.form;
        let table=layui.table;
        let layer=layui.layer;
        let $=layui.jquery;
        let laydate=layui.laydate;
        //页面加载时查询所有在职的业务员
        $.get("${ctx}/user/queryAllAvailableUser.action",function (res) {
            let users=res.data;
            let html=$("#userId").html();
            $.each(users,function (index,item) {
                html+="<option value='"+item.id+"'>"+item.realname+"</option> "
            })
            //放回去
            $("#userId").html(html);
            //重新渲染
            form.render("select");
        })
        //渲染数据表格
        let customerTable= table.render({
            elem: '#customerTable'
            ,url:'${ctx}/customer/query.action'
            ,toolbar: '#customerTableToolbar' //开启头部工具栏，并为其绑定左侧模板
            ,title: '客户数据表' //excel导出的文件名
            ,height:'full-200'
            ,cols: [[
                {type:"checkbox"}
                ,{field:'id', title:'ID',align:"center"}
                ,{field:'name', title:'客户姓名',align:"center"}
                ,{field:'phone', title:'电话',align:"center"}
                ,{field:'realname', title:'业务员',align:"center"}
                ,{field:'company', title:'客户公司',align:"center"}
                ,{field:'sex', title:'性别',align:"center",templet:function (d) {
                        let str="";
                        if(d.sex==1){
                            str="<font color='blue'>男</font>"
                        }else  if(d.sex==0){
                            str="<font color='red'>女</font>"
                        }
                        return str;
                    }}
                ,{field:'deleted', title:'客户状态',align:"center",templet:function (d) {
                        let str="";
                        if(d.deleted==1){
                            str="<font color='blue'>有效</font>"
                        }else  if(d.deleted==2){
                            str="<font color='red' >无效</font>"
                        }
                        return str;
                    }}
                ,{field:'createTime', title:'创建时间',align:"center"}
                ,{field:'updateTime', title:'更新时间',align:"center"}
                ,{field:'deleteTime', title:'删除时间',align:"center"}
                ,{fixed: 'right', title:'操作',align:"center", toolbar: '#customerTableRowBar', width:249}
            ]]
            ,page: true
        });

        //监听查询按钮的点击
        form.on("submit(doSearch)",function (data) {
            let params=data.field;
            console.log(params);
            customerTable.reload({
                //每次模糊查询 都回到第一页
                page:{
                    curr:1
                },
                //查询条件
                where:params
            })
        })
        //
        //头工具栏事件
        table.on('toolbar(customerTable)', function(obj){
            switch(obj.event){
                case "add":
                    openAddCustomerLayer();
                    break;
                case "changeUser":
                    openChangeUserLayer();
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(customerTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                doDelete(data);
            } else if(obj.event === 'update'){
                openUpdateCustomerLayer(data);
            } else if(obj.event === 'showVisitLog'){
                openShowVisitLogLayer(data);
            }
        });

        //声明一个全局的url
        let url="";
        //声明一个存放弹出层索引的变量
        let index=0;
        //打开添加的弹出层
        function openAddCustomerLayer() {
            index=layer.open({
                type:1,
                content: $("#addOrUpdateDiv"),
                area:['400px','300px'],
                title:"新建客户档案",
                success:function () {
                    //重置表单
                    $("#dataFrm")[0].reset()
                    //赋值url
                    url="${ctx}/customer/add.action";
                }
            })
        }
        //打开修改的弹出层
        function openUpdateCustomerLayer(data) {
            index=layer.open({
                type:1,
                content: $("#addOrUpdateDiv"),
                area:['400px','300px'],
                title:"修改【"+data.name+"】客户档案",
                success:function () {
                    //把当前行的数据填入表单
                    form.val('dataFrm',data);
                    //赋值url
                    url="${ctx}/customer/update.action";
                }
            })
        }
        //监听表单保存按钮的点击
        form.on("submit(doSubmit)",function (data) {
            let params=data.field;
            //发送请求
            $.post(url,params,function (res) {
                if(res.code==200){
                    layer.msg(res.msg);
                    //刷新表格
                    customerTable.reload();
                    //关闭弹出层
                    layer.close(index)
                }else{
                    layer.msg(res.msg);
                }
            })

        })

        //监听删除的方法
        function doDelete(data) {
            layer.confirm('真的要删除【'+data.name+'】这个客户吗?', function(index){
                $.post("${ctx}/customer/del.action",{id:data.id},function (res) {
                    if(res.code==200){
                        layer.msg(res.msg);
                        layer.close(index);
                        //刷新表格
                        customerTable.reload();
                    }else{
                        layer.msg(res.msg);
                    }
                })
            });
        }
        //打开选择业务员的弹出层
        function openChangeUserLayer() {
            //判断用户是否选择了至少一个客户
            let checkStatus = table.checkStatus("customerTable");
            let data = checkStatus.data;
            if(data.length==0){
                layer.msg("请选择要转移的客户")
                return;
            }
            index=layer.open({
                type:1,
                content: $("#changeUserDiv"),
                area:['600px','400px'],
                title:"转移客户",
                success:function () {
                    //查询所有在职的业务员
                    $.get("${ctx}/user/queryAllAvailableUser.action",function (res) {
                        let users=res.data;
                        let html="";
                        $.each(users,function (index,item) {
                            html+='<input type="radio" value="'+item.id+'" name="userId" title="'+item.realname+'">'
                        })
                        //放回去
                        $("#users").html(html);
                        //重新渲染
                        form.render("radio");
                    })
                }
            })
        }
        //监听选择业务员弹出层的保存事件
        form.on("submit(doChangeUserSubmit)",function (obj) {
            let data=obj.field;
            if(data.userId){
                console.log(data);
            }else{
                layer.msg("请选择业务员")
            }
            let checkStatus = table.checkStatus("customerTable");
            let customerData = checkStatus.data;
            let params="userId="+data.userId;
            $.each(customerData,function (index,item) {
                params+="&customerIds="+item.id;
            })
            console.log(params);
            //发送AJAX请求
            $.post("${ctx}/customer/changeCustomerUser.action",params,function (res) {
                layer.msg(res.msg);
                if(res.code==200){
                    customerTable.reload();
                    layer.close(index);
                }
            })
        })

        //打开查看拜访记录的弹出层
        function openShowVisitLogLayer(data) {
            index=layer.open({
                type:1,
                content: $("#addShowVisitLogDiv"),
                area:['400px','300px'],
                title:"添加【"+data.name+"】的拜访数据",
                success:function () {
                    //清空表里面的数据
                    $("#visitLogFrm")[0].reset();
                    //绑定时间选择器
                    laydate.render({
                        elem:"#visitTime",
                        type:"datetime"
                    });
                    //渲染拜访记录的数据表格
                    let visitLogTable= table.render({
                        elem: '#visitLogTable'
                        ,url:'${ctx}/visitLog/query.action?customerId='+data.id
                        ,toolbar: true //开启头部工具栏，并为其绑定左侧模板
                        ,title: '客户数据表' //excel导出的文件名
                        // ,height:'full-200'
                        ,cols: [[
                            ,{field:'realname', title:'业务员',align:"center"}
                            ,{field:'descp', title:'拜访内容',align:"center"}
                            ,{field:'visitTime', title:'拜访时间',align:"center"}
                            ,{field:'createTime', title:'创建时间',align:"center"}
                        ]]
                        ,page: true
                    });
                    //给doVisitLogSubmit绑定事件
                    form.on("submit(doVisitLogSubmit)",function (obj) {
                        let params=obj.field;
                        params.customerId=data.id;
                        params.name=data.name;

                        $.post("${ctx}/visitLog/add.action",params,function (res) {
                            layer.msg(res.msg)
                            if(res.code==200){
                                $("#visitLogFrm")[0].reset();
                                visitLogTable.reload();
                            }
                        })
                        return false;//阻止表单同步提交
                    })
                }
            })
        }

        //解决业务员进来查询条件里面的【选择业务员】 隐藏   数据表格里面的[客户转移] 隐藏
        let role=${user.role};
        if(role==2){
            $("#chooseUserId").hide();
            $("#changeUser").hide();
        }
    })

</script>
</html>
